<template>
  <div class="login-box">
    <van-form @submit="onSubmit" class="log-on">
      <div class="log-tityou" @click="router.push('/l/login')">登录</div>
      <div class="log-title">注册</div>
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" placeholder="请输入用户名" />
        <van-field v-model="regvalue" center clearable  name="验证码" placeholder="验证码">
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
        <van-field v-model="password" type="password" name="密码" placeholder="请设置密码" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" style="margin-top: 25px">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { closeToast, showLoadingToast, showToast } from 'vant';
import { useRouter } from 'vue-router'

const router = useRouter()

const username = ref('');
const regvalue = ref('');
const password = ref('');
const onSubmit = (values) => {
  console.log(values.用户名);
  if (values.用户名 && values.密码 && values.验证) {
    showLoadingToast('注册中...');
    setTimeout(() => {
      closeToast();
      showToast('注册成功---');
      setTimeout(() => {
        router.push('/l/login')
      }, 1000)
    }, 1000);
  } else {
    showLoadingToast('验证中...');
    setTimeout(() => {
      closeToast();
      showToast('注册失败！！！');
    }, 2000);
  }

  console.log('submit', values);
};
</script>

<style lang="scss" scoped>
.login-box {
  height: 270px;
  width: 330px;
  background-color: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;

  .log-on {
    height: 200px;
    width: 335px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.log-title {
  width: 200px;
  text-align: center;
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.log-tityou {
  text-align: center;
  position: absolute;
  top: -60%;
  left: 90%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #fff;
}
</style>